<template>
    <div>
        <div class="SelectedTaskList" @click="todetail">
            <div class="TaskTitle">
                <p>{{titlename}}</p>
            </div>
            <div class="price">
                <p>
                    <span class="UnitPrice">{{price}}</span>
                    <span>￥</span>
                </p>
                <div class="TaskLabel">
                    <!-- <p v-for="(item,index) in label" :key="index">{{item}}</p> -->
                    <van-tag type="warning" v-for="(item,index) in label" :key="index">{{item}}</van-tag>
                </div>
            </div>
            <div class="icon_button">
                <p>
                    <svg v-if="certification==='实名认证'" t="1665060771036" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1069" width="20" height="20">
                        <path
                            d="M949.333333 160v704h-874.666666v-704h874.666666z m-64 64h-746.666666v576h746.666666v-576z m-512.042666 142.229333a105.365333 105.365333 0 0 1 82.154666 171.328 149.162667 149.162667 0 0 1 67.136 119.616l0.085334 5.141334h-64a85.376 85.376 0 0 0-170.624-4.266667l-0.106667 4.266667h-64a149.226667 149.226667 0 0 1 67.221333-124.778667 105.365333 105.365333 0 0 1 82.133334-171.306667z m435.498666 197.717334v64h-202.133333v-64h202.133333z m-435.498666-133.717334a41.365333 41.365333 0 1 0 0 82.709334 41.365333 41.365333 0 0 0 0-82.709334z m360.32-34.176v64h-126.954667v-64h126.933333z"
                            fill="#1677FF" p-id="1070"></path>
                    </svg>
                    <svg v-else t="1665295798942" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1132" width="20" height="20">
                        <path d="M188.58496 133.97504h457.38496v757.76H188.58496z" fill="#BAD4FF" p-id="1133"></path>
                        <path
                            d="M440.4992 261.76h145.1264V313.088H440.4992V261.76zM440.4992 441.728h145.1264v52.3776H440.4992v-52.3776zM744.81152 618.2656h46.40768V763.392h-46.40768v-145.1264zM744.81152 422.8608h46.40768v145.13152h-46.40768V422.8608zM245.0944 618.2656h145.152v51.32288H245.0944v-51.32288z"
                            fill="#4E8CEE" p-id="1134"></path>
                        <path
                            d="M910.976 878.1312V261.76H682.2912V97.536H146.3552v780.5952H50.7136v48.44032h924.672v-48.44032h-64.4096z m-49.5104-570.0096v570.0096H682.2912V308.1216h179.1744z m-225.536-162.1504v732.16H195.84v-732.16h440.0896z"
                            fill="#4E8CEE" p-id="1135"></path>
                        <path
                            d="M245.0944 441.728h145.152v52.3776H245.0944v-52.3776zM440.4992 618.2656h145.1264v51.32288H440.4992v-51.32288zM245.0944 261.76h145.152V313.088H245.0944V261.76z"
                            fill="#4E8CEE" p-id="1136"></path>
                    </svg>
                    <span>{{certification}}</span>
                </p>
                <div @click="onsuccess" v-if="orderBtn" class="orderBtn" :class="orderBtn==='订单完成'? 'orderBtn2':''">{{orderBtn}}</div>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    props: {
        titlename: { type: String, default: () => '任务标题' },
        price: { type: Number, default: () => 0 },
        label: { type: Array, default: () => ['标签一', '标签二'] },
        certification: { type: String, default: () => '实名认证' },
        orderBtn: { type: String, default: () => '' },
        _id:{ type: String, default: () => '' }
    },
    methods:{
      todetail(){
        this.$emit('todetail',this.titlename)
      },
      onsuccess(){
        this.$emit('success',this._id)
      }
    }
}
</script>
<style lang="less" scoped>
.SelectedTaskList {
    background: rgb(255, 255, 255);
    padding: 10px;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-radius: 5px;
    margin-bottom: 10px;
    .price {
      display: flex;
      justify-content: space-between;

      p {
        color: rgb(255, 106, 0);
      }

      .UnitPrice {
        font-size: 20px;
      }

      .TaskLabel {
        display: flex;
        gap: 5px;
        p {
          background: rgb(255, 235, 209);
          color: rgb(255, 106, 0);
          font-size: 10px;
          padding: 3px;
          border-radius: 5px;
          margin: 2px;
        }
      }
    }

    .icon_button {
      display: flex;
      align-items: center;
      justify-content: space-between;

      p {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
      }

      .orderBtn {
        background: rgb(255, 106, 0);
        padding: 7px 12px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
        font-size: 13px;
        color: #fff;
      }
      .orderBtn2{
        background: rgb(0, 175, 18);
      }
    }
  }
</style>